<template>
  <div>
    <div id="div1">
      <div id="div2">
        <el-button
          @click="drawer = true"
          style="margin-left: 5px; padding: 3px"
          icon="el-icon-menu"
        >
        </el-button>

        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false"
          direction="ltr"
          style="color: black; width: 500px"
        >
          <div id="tittle">菜 单</div>
          <el-col :span="12">
            <!-- <h5>导航</h5> -->
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
            >
              <el-menu-item @click="goto('/home')">
                <i class="el-icon-basketball"></i>
                <span slot="title">首页</span>
              </el-menu-item>

              <el-menu-item @click="loginOut">
                <i class="el-icon-document"></i>
                <span slot="title">退出</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-drawer>
        <!-- <img src="https://pic1.imgdb.cn/item/63638b0a16f2c2beb1b4940b.png"> -->
      </div>
      <div>
        <!-- <img src="@/assets/logo_transparent.png" alt="" id="imgLogo"> -->
      </div>
      <ul id="zhuangtai">
        <li @click="isShow">
          <img src="https://pic1.imgdb.cn/item/63638bbe16f2c2beb1b59a94.png" />
        </li>
        <li id="goOut" style="display: none" @click="loginOut">退出</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    };
  },
  methods: {
    goto(address){
      this.$router.push(address)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    isShow() {
      let goout = document.getElementById("goOut");
      if (goout.style.display == "none") {
        goout.style.display = "block";
      } else {
        goout.style.display = "none";
      }
    },
    loginOut(){
      this.$router.push("/login")
      sessionStorage.removeItem("id")
      sessionStorage.removeItem("token")
    }
  },
};
</script>

<style lang="less" scoped>
#tittle {
  margin-left: 11vw;
  padding-top: 1vh;
  // color: rgb(59, 58, 58);
  color: white  ;
}

#zhuangtai {
  float: right;
  list-style-type: none;
  margin-top: 3vh;
  margin-right: -2vw;
  z-index: 5;
  color: white;
  font-size: 15px;
  position: relative;
  li {
    background-color: rgb(117, 126, 177);
    width: 60px;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 3.5px 0;
  }
  #goIn {
    position: absolute;
    padding: 5px 0;
  }
  #goOut {
    position: absolute;
  }
  img {
    height: 35px;
    width: 35px;
  }
}
#div1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px 10px 0 0;
  width: 92vw;
  height: 9vh;
  padding: 0 2vw;
  margin-top: 1vh;
  background-color: rgb(117, 126, 177);
  letter-spacing: 1px;
  #imgLogo{
  border-radius: 10px;  
  margin-top: 0.5vh;
  width: 40vw;
  height: 17vh;
  margin-top: 2vh;
  object-fit: contain;
}
  #div2 {
    width: 96vw;
    display: flex;
    text-align: left;
    // margin-left: 20px;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    img {
      height: 35px;
      width: 35px;
    }
  }
}
</style>
<style>
.el-drawer__body {
  /* background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); */
  background-color: #545c64;
  border-radius: 0 3px 3px 0;
  width: 300px !important;
  /* background-color: red; */
}
.el-icon-menu {
  font-size: 25px;
  color: rgb(117, 126, 177);
}
</style>